@mixin transition($v) {
  transition: $v;
}

@mixin transform($v) {
  transform: $v;
}

/*4.8 进度条
  name:      hui-progress
  example:
    <div class="hui-progress radius">
      <div class="hui-progress-bar">
        <span class="sr-only"></span>
      </div>
    </div>
  explain:    警告,使用警告框jQuery插件
*/
.hui-progress {
  overflow: hidden;
  width: 400px;
  height: 10px;
  font-size: 0;
  line-height: 0;
  .hui-progress-bar {
    width: 100%;
    background-color: #efefef;
    height: 10px;
    font-size: 0;
    line-height: 0;
    .sr-only {
      height: 10px;
      font-size: 0;
      line-height: 0;
      display: inline-block;
      background-color: #337ab7;
      @include boxShadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
      @include transition(width .6s ease);
    }
    &.hui-progress-bar-success .sr-only {
      background-color: #5cb85c;
    }

    &.hui-progress-bar-warning .sr-only {
      background-color: #f0ad4e;
    }

    &.hui-progress-bar-danger .sr-only {
      background-color: #d9534f;
    }
  }
}